<template>
  <ul class="shopcarBottom">
    <li class="bottomSelect">
      <div class="bottomSelectImg" @click="_changSelectAllState">
        <img v-if="selectAllOrNot" src="/static/images/shopcar/checkbox-active.png">
        <img v-else src="/static/images/shopcar/checkbox.png">
      </div>
      <p>全选</p>
    </li>
    <li class="bottomPrice">
      合计：<span>￥{{totalPriceIncart}}</span>
    </li>
    <li class="settleAccounts" :class="{'active': isBtnDisabled}" @click="payMoney">结算&nbsp;&nbsp;({{selectedProductCount}})</li>
  </ul>       
</template>

<script>
  import {mapGetters} from 'vuex'
  import calUserDiscountMixin from '@/utils/calUserDiscount'
  export default {
    mixins: [calUserDiscountMixin],
    data(){
      return {
       isAllSelect: false, //是否全部选中，默认为false不选中
     }
    },
    onLoad(){
      console.log('购物车页面的商品',this.currentProductCar)
    },
    computed: {
      ...mapGetters({
        currentProductCar: 'currentProductCar'
      }),
      totalPriceIncart () {
        console.log('购物车页面的当前所有商品',this.currentProductCar)
        return this._totalPriceFilter(this.currentProductCar).toFixed(2)
      },
      isBtnDisabled() {
        if (this._totalPriceFilter(this.currentProductCar) > 0) {
          return false
        } else {
          return true
        }
      },
      selectedProductCount() { //结算处的数目
        let count = 0
        this.currentProductCar.map((lineItem) => {
          if (lineItem.isSelected) {
            count += 1
          }
        })
        return count
      },
      selectAllOrNot () {
        if (this.selectedProductCount === this.currentProductCar.length) {
          console.log('1111111111,长度',this.selectedProductCount,this.currentProductCar.length)
          return true  //全选了
        } else {
          return false //全不选了
        }
      }
    },
   methods:{
      payMoney() {
        if (this.isBtnDisabled) {
          return
        }
        const url = "/pages/order-quickly/main"
        wx.navigateTo({ url })
      },
      _changSelectAllState () {
        let selectAllOrNot = this.selectAllOrNot
        console.log('2222222,布尔值',this.selectAllOrNot)
        if (!selectAllOrNot) {
          this._selectAll()
        } else {
          this._unSelectAll()
        }
      },
      _selectAll () { //全选
        this.$store.dispatch('selectLineItems')
      },
      _unSelectAll () { //不选
        this.$store.dispatch('unSelectLineItems')
      }
   },
  }
</script>

<style scoped>
.shopcarBottom{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 99rpx;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #efeff4;
  padding-left: 30rpx;
  background: #fff;
}
.shopcarBottom .bottomSelect{
  display: flex;
}
.shopcarBottom .bottomSelect .bottomSelectImg{
  width: 44rpx;
  height: 44rpx;
}
.shopcarBottom .bottomSelect .bottomSelectImg img{
  width: 100%;
  height: 100%;
}
.shopcarBottom .bottomSelect p{
  font-size: 30rpx;
  color: #2a2a2a;
  margin-left: 20rpx;
}
.shopcarBottom .bottomPrice{
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 30rpx;
  color: #2a2a2a;
  margin-right: 40rpx;
}
.shopcarBottom .bottomPrice span{
  font-size: 36rpx;
  color: #e38a8a; 
}
.shopcarBottom .settleAccounts{
  width: 240rpx;
  height: 99rpx;
  background: #e1c7d2;
  font-size: 36rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shopcarBottom .settleAccounts.active{
  background: #ccc;
}
</style>